<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .prent {
            width: 100%;
            height: 300px;
            background-color: red;
            color: #fff;
        }

        .child {
            width: 100%;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<!-- 用来将jsx语法转化为js语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            childNum: "",
            msg: '好好学习天天向上'
        }
        render() {
            return (
                <div clsaaName='prent'>
                    <h1>父组件----{this.state.childNum}</h1>
                    <Child getNum={(num) => {
                        console.log(num);
                        this.setState({
                            childNum: num,
                            msg: '哈哈哈哈'
                        })

                    }} msg={this.state.msg} getList={this.getList} />

                </div>
            )
        }
        getList = (list) => {
            console.log(list);
            console.log(this);
        }
    }
    /* 
    子传父
    1. 在父组件中子组件标签绑定一个自定义属性 自定义属性必须为函数
    2.在子组件中使用this.props.属性名调用父组件传递过来的函数，通过函数传递参数
    */
    class Child extends React.Component {
        state = {
            num: 0,
            list: [1, 2, 3, 4, 5, 6, 7]
        }
        render() {
            console.log(this)
            let { num } = this.state;
            return (
                <div clsaaName='child'>
                    <h1>子组件---{num}---{this.props.msg}</h1>
                    <button onClick={() => {
                        num++
                        this.setState({
                            num: num
                        }, () => {
                            this.props.getNum(num);
                        })
                    }}>
                        向父组件传值</button>
                    <button onClick={() => {
                        this.props.getList(this.state.list)

                    }}>
                    向父组件传值list</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>